<script setup>
import { ref } from 'vue';

const isToggled = ref(false);
const toggleCount = ref(0);
const selectedFormat = ref('paragraph');
const boldEnabled = ref(false);
const italicEnabled = ref(false);
const underlineEnabled = ref(false);

const formatOptions = [
  { label: 'Paragraph', value: 'paragraph' },
  { label: 'Heading 1', value: 'h1' },
  { label: 'Heading 2', value: 'h2' },
  { label: 'Quote', value: 'blockquote' },
];

const handleToggleClick = () => {
  toggleCount.value++;
};
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">ToggleButton Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic ToggleButton</h3>
        <div class="flex flex-col space-y-4">
          <ToggleButton v-model="isToggled" @click="handleToggleClick">
            {{ isToggled ? 'ON' : 'OFF' }}
          </ToggleButton>
          <div>Toggle state: {{ isToggled ? 'On' : 'Off' }}</div>
          <div v-if="toggleCount > 0">Toggled {{ toggleCount }} times</div>

          <ToggleButton disabled> Disabled Toggle </ToggleButton>

          <ToggleButton checked disabled> Disabled Checked </ToggleButton>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <div class="flex flex-col space-y-4">
          <h3 class="mb-2 font-medium">ToggleButton Variations</h3>

          <div>
            <h4 class="mb-2 text-sm font-medium">Appearances</h4>
            <div class="space-y-2">
              <div>
                <ToggleButton appearance="accent"> Accent </ToggleButton>
              </div>
              <div>
                <ToggleButton appearance="lightweight">
                  Lightweight
                </ToggleButton>
              </div>
              <div>
                <ToggleButton appearance="outline"> Outline </ToggleButton>
              </div>
              <div>
                <ToggleButton appearance="stealth"> Stealth </ToggleButton>
              </div>
            </div>
          </div>

          <div class="mt-4">
            <h4 class="mb-2 text-sm font-medium">Toggle Button Group</h4>
            <div class="flex space-x-1">
              <ToggleButton
                v-for="(option, index) in formatOptions"
                :key="index"
                :checked="selectedFormat === option.value"
                @click="selectedFormat = option.value"
              >
                {{ option.label }}
              </ToggleButton>
            </div>
            <div class="mt-2">Selected format: {{ selectedFormat }}</div>
          </div>

          <div class="mt-4">
            <h4 class="mb-2 text-sm font-medium">With Icons</h4>
            <div class="flex space-x-2">
              <ToggleButton v-model="boldEnabled">
                <span class="font-bold">B</span>
              </ToggleButton>

              <ToggleButton v-model="italicEnabled">
                <span class="italic">I</span>
              </ToggleButton>

              <ToggleButton v-model="underlineEnabled">
                <span class="underline">U</span>
              </ToggleButton>
            </div>
            <div class="mt-2">
              Text formatting:
              {{ boldEnabled ? 'Bold ' : '' }}
              {{ italicEnabled ? 'Italic ' : '' }}
              {{ underlineEnabled ? 'Underlined' : '' }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
